<template>
	<view class="notify">
		<up-toast ref="uToastRef"></up-toast>
		<up-subsection :list="list" :current="current" @change="sectionChange"></up-subsection>
		<view class="list">
			<view class="item" v-for="(item, index) in indexList" :key="index" @click="handleGo(item.noticeId)">
				<view class="top">
					<text class="title">{{item.noticeTitle}}</text>
					<!-- <up-tag text="未读" plain></up-tag> -->
					<!-- <up-tag text="未读" plain size="mini"></up-tag> -->
				</view>
				<view>
					<text class="time">{{item.createTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import http from "@/request/index.js"
	const list = ref([ '通知', '公告' ]);
	const current = ref(0);
	const indexList = ref([]);
	const pageNum = ref(1);
	const pageSize = ref(15);
	const totalPages = ref(0);
	const uToastRef = ref(null)
	
	onMounted(() => {
		current.value = 0;
		indexList.value = [];
		pageNum.value = 1;
		getList(0);
	})
	
	const sectionChange = (e) => {
		console.log(e);
		current.value = e;
		indexList.value = [];
		getList(e);
	}
	const handleGo = (id) => {
		uni.navigateTo({
			url: `/pages/index/notifyDetail?id=${id}`
		})
	}
	const getList = async(type) => {
		const pageNum = pageNum.value, pageSize = pageSize.value;
		let { code, msg, data } = await http(`/app/notice/queryPage`, {
			pageNum,
			pageSize,
			type: type + 1,
		}, 'POST')
		if (code != 200) return
		indexList.value = data.data ? indexList.concat(data.data) : [],
		totalPages.value = data.totalPages
	}
	const onPullDownRefresh = () => {
		pageNum.value = 1;
		indexList.value = [];
		getList(current.value);
	}
	const onReachBottom = () => {
		if (pageNum.value >= totalPages.value) {
			return uToastRef.value.show({
				message: `我已经到底啦`,
				type: 'success',
			})
		}
		pageNum.value += 1
		getList(current.value)
	}
</script>

<style lang="scss" scoped>
	.notify {
		width: 100%;
		height: 100vh;
		background-color: #f7f7f7;
		.list {
			width: 90%;
			margin: 20px auto;
			background-color: #fff;
			padding: 10px;
			border-radius: 8px;
			.item {
				border-bottom: 1px solid #f7f7f7;
				padding: 15px 5px;
				.top {
					margin-bottom: 5px;
				}
				.title {
					font-weight: bold;
					width: 100%;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.time {
					color: #999;
					font-size: 12px;
				}
			}
		}
	}
</style>
